<template>
	<view class="nav-cont" :style="{paddingTop:pTop+'px'}">
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-locationfill text-gray"></text> 
				<text class="city">{{city}}</text>
			</view>
			<view class="content text-bold">
				<image class="logo" src="/static/img/mcake.png" mode="heightFix"></image>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="action text-grey">
				<text class="cuIcon-search"></text>
				<text class="cuIcon-sort"></text>
			</view>
			<!-- #endif -->
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"custom-nav",
		data() {
			return {
				pTop:0
			};
		},
		computed: {
			city() {
				return this.$store.state.loc.city
			}
		},
		created() {
			uni.getSystemInfo({
				success: ({statusBarHeight}) => {
					this.pTop = statusBarHeight
				}
			})
		}
	}
</script>

<style lang="scss">
.logo{
	height: 26upx;
}
.nav-cont{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	background-color: #fff;
}
.city{
	/* #ifdef H5 */
	color: orange;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	color: #6677aa;
	/* #endif */
}
</style>